<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .aui-bar-nav {
            background-color: #FFF;
            color: #000;
            position: fixed;
        }

        .aui-bar-nav .aui-iconfont {
            color: #000!important;
            font-weight: bold;
        }

        .aui-content {
            margin-top: 2.25rem;
            position: relative;
        }

        body,
        aui-content {
            background-color: #FAFAFA;
        }

        .register {}

        .register .logo-box img {
            width: 24%;
            margin: 2.4rem auto 0;
            border-radius: 50%;
            border: 1px solid #EEEEEE;
        }

        .register .from-box {
            width: 80%;
            margin: 2rem auto 0;
        }

        .register .from-box .flex-row {
            background-color: #FFF;
            display: flex;
            align-items: center;
            border: 1px solid #EEEEEE;
            padding-left: 0.5rem;
            border-radius: 0.2rem;
            margin-bottom: 0.6rem;
        }

        .register .from-box .flex-row img {
            width: 1.5rem;
            margin-right: 0.5rem;
            height: 1.5rem;
        }

        .register .from-box .flex-row input {
            flex: 1;
            height: 1.8rem;
            font-size: 0.8rem;
            margin: 0.2rem 0;
            color: #444;
            line-height: 1.8rem;
        }

        .register .from-box .flex-row input::-webkit-input-placeholder {
            color: #999999;
            font-size: 0.8rem;
        }

        .register .from-box .flex-row input:-moz-placeholder {
            color: #999999;
            font-size: 0.8rem;
        }

        .register .from-box .flex-row input::-moz-placeholder {
            color: #999999;
            font-size: 0.8rem;
        }

        .register .from-box .flex-row input:-ms-input-placeholder {
            color: #999999;
            font-size: 0.8rem;
        }

        .register .from-box .flex-row button {
            height: 2.2rem;
            width: 40%;
            color: #FFF;
            font-size: 0.8rem;
            display: block;
            border: none;
            border-radius: 0;
            margin: 0;
            background-color: #FE563A;
        }

        .register .login-btn button {
            display: block;
            width: 80%;
            margin: 2.4rem auto 0;
            background-color: #FE563A;
            border: none;
            font-size: 0.8rem;
            height: 2.2rem;
            border-radius: 1.1rem;
            line-height: 2.2rem;
            color: #FFF;
        }

        .register .login-btn button[disabled] {
            opacity: 0.6;
        }
    </style>
</head>

<body>
    <header id="header" class="aui-bar aui-bar-nav">
        <a class="aui-pull-left aui-btn" tapmode onclick="comeBack()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">用户注册</div>
    </header>
    <div id="aui-content" class="aui-content register">
        <div class="logo-box"> <img src="../icon/logo.png"></div>
        <div class="from-box">
            <div class="flex-row">
                <img src="../image/account.png">
                <input type="text" id="user_login" placeholder="请输入用户名">
            </div>
            <div class="flex-row">
                <img src="../image/account.png">
                <input type="number" id="phone" placeholder="请输入手机号">
            </div>
            <div class="flex-row">
                <img src="../image/pass.png">
                <input id="pass" type="password" placeholder="请输入密码">
            </div>
            <div class="flex-row">
                <img src="../image/pass.png">
                <input id="ypass" type="password" placeholder="请再次输入密码">
            </div>
            <div class="flex-row">
                <img src="../image/pass.png">
                <input id="code" type="number" placeholder="输入验证码">
                <button onclick="getCode(this)" type="button">获取验证码</button>
            </div>
        </div>

        <div class="login-btn"><button id="loginBtn" onclick="Login();" disabled type="button">注册</button></div>

    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../script/md5.min.js"></script>
<script type="text/javascript">
    var countdown = 60; //
    apiready = function() {
        initHeard();
        $api.fixStatusBar($api.byId('aui-content'));
    };
    // 登陆事件
    function Login() {
        var phone = $("#phone").val();
        var user_login = $("#user_login").val();
        var code = $("#code").val();
        var pass = $("#pass").val();
        var ypass = $("#ypass").val();
        var isMob = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
        if (user_login == '') {
            _msg("请输入用户名")
            return false;
        } else if (phone == '') {
            _msg("请输入手机号")
            return false;
        } else if (!isMob.test(phone)) {
            _msg("手机号输入有误");
            return false;
        } else if (code == '') {
            _msg("请输入验证码")
            return false;
        } else if (pass == '') {
            _msg("请输入密码")
            return false;
        } else if (ypass == '') {
            _msg("请输入二次密码")
            return false;
        } else if (ypass == '') {
            _msg("请输入二次密码")
            return false;
        } else if (pass != ypass) {
            _msg("输入的密码不相同")
            return false;
        }
        _ajax("user/binduser", {
            devicecode: api.deviceId,
            mobile: phone,
            user_pass: pass,
            user_login: user_login,
            re_pass: pass,
            code: code
        }, function(res, err) {
            if (res) {
                _msg(res.msg);
                if (res.errCode == 1) {
                    setTimeout(function() {
                        openWin('login', null, false);
                        api.closeFrame();
                    }, 800)
                }
            } else {
                _msg("网络错误");
            }
        })
    };

    //验证码倒计时
    function getCode(that) {
        var phone = $("#phone").val();
        var isMob = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
        if (phone == '') {
            _msg("请输入手机号")
            return false;
        } else if (!isMob.test(phone)) {
            _msg("手机号输入有误");
            return false;
        }
        _ajax("index/send", {
            mobile: phone
        }, function(res, err) {
            if (res) {
                _msg(res.msg);
                console.log(JSON.stringify(res))
                if (res.errCode == 1) {
                    that.setAttribute("disabled", true);
                    settime(that);
                    $("#loginBtn").attr("disabled", false);
                }
            }else{
              console.log(JSON.stringify(err))
            }
        })
    };

    function settime(that) {
        if (countdown == 0) {
            that.removeAttribute("disabled");
            that.innerText = "重新发送";
            countdown = 60;
            return false;
        } else {
            that.innerText = "剩余" + countdown + "s";
            countdown--;
            setTimeout(function() {
                settime(that)
            }, 1000)
        }
    };

    function corfirm(that) {
        var cname = $("#cname").val();
        var alipay = $("#account").val();
        if (cname == '') {
            _msg("请输入真实姓名");
            return false;
        }
        if (alipay == '') {
            _msg("请输入支付宝账号");
            return false;
        }
        _ajax("user/bindAlipay", {
            apply_name: cname,
            apply_account: alipay
        }, function(res, err) {
            if (res) {
                _msg(res.msg);
                if (res.errCode) {
                    userInfo.apply_name = cname;
                    userInfo.apply_account = alipay;
                    $api.setStorage('user', JSON.stringify(userInfo));
                    setTimeout(function() {
                        comeBack();
                    }, 800)
                }
            } else {
                _msg("网络错误");
            }
        })
    };

    function openFrame(url, name) {
        // 解析属性	消除点击300S 延时问题 tapmode
        api.parseTapmode();
        api.openFrame({
            name: name,
            url: 'widget://html/' + url + '.html',
            bounces: false,
            allowEdit: true,
            reload: true,
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
        })
    }
</script>

</html>
